:root {
  /* 基础字体设置 */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  /* 亮色系主题颜色方案 */
  color-scheme: light;
  /* 主要文字颜色 - 使用深灰色提高可读性和舒适度 */
  color: #333333;
  /* 页面背景颜色 - 使用纯白色提供明亮感 */
  background-color: #ffffff;

  /* 字体渲染优化 */
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* 主题色彩变量 */
  --primary-color: #007bff;
  --success-color: #28a745;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
  --text-primary: #333333;
  --text-secondary: #666666;
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --border-color: #dee2e6;
  --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
}

a {
  font-weight: 500;
  /* 链接颜色 - 使用主题主色 */
  color: var(--primary-color);
  text-decoration: inherit;
  /* 添加过渡效果提升用户体验 */
  transition: color 0.2s ease;
}

a:hover {
  /* 链接悬停效果 - 稍微加深颜色 */
  color: #0056b3;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 6px;
  border: 1px solid var(--border-color);
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  /* 按钮背景颜色 - 浅色主题下的按钮背景 */
  background-color: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  /* 添加过渡效果提升用户体验 */
  transition: all 0.2s ease;
}

button:hover {
  /* 按钮悬停效果 */
  background-color: var(--bg-secondary);
  border-color: #adb5bd;
}

button:focus,
button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.card {
  padding: 2em;
}

#app {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  min-height: 100vh;
  background-color: var(--bg-primary);
}

/* 表格样式 - 优化视觉体验和可读性 */
.el-table {
  /* 表格背景颜色 - 使用白色 */
  background-color: var(--bg-primary) !important;
  /* 表格文字颜色 - 使用深灰色 */
  color: var(--text-primary) !important;
  /* 确保表格数据完整显示，不被省略 */
  overflow: visible !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-light);
}

/* 确保表格单元格内容完全显示，不被截断或省略 */
.el-table__row .el-table__cell {
  /* 强制显示完整文本，不截断 */
  white-space: normal !important;
  /* 设置合理的最小宽度，确保内容不被挤压 */
  min-width: 120px !important;
  /* 允许文字自动换行 */
  word-wrap: break-word;
  /* 确保内容完全可见 */
  overflow: visible !important;
  text-overflow: clip !important;
  /* 增加行高以容纳多行内容 */
  line-height: 1.6;
  padding: 12px;
  color: var(--text-primary) !important;
  background-color: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
  transition: background-color 0.2s ease;
}

/* 表格行悬停效果 */
.el-table__row:hover .el-table__cell {
  background-color: var(--bg-secondary) !important;
}

/* 防止Element UI表格内容被省略号截断的直接样式 */
.el-table .el-table__body-wrapper .el-table__body .el-table__row .el-table__cell {
  /* 确保不使用省略号 */
  text-overflow: clip !important;
  /* 确保内容完全显示 */
  overflow: visible !important;
  /* 允许文字换行 */
  white-space: normal !important;
  color: var(--text-primary) !important;
  background-color: var(--bg-primary) !important;
}

.el-table__header-wrapper th {
  /* 表头背景颜色 - 使用浅灰色突出表头区域 */
  background-color: var(--bg-secondary) !important;
  /* 表头文字颜色 - 使用深灰色确保清晰可见 */
  color: var(--text-primary) !important;
  font-weight: 600;
  border-color: var(--border-color) !important;
}

.el-table__body-wrapper td {
  /* 表格单元格文字颜色 - 使用深灰色确保清晰可见 */
  color: var(--text-primary) !important;
  font-weight: 500;
}

/* 确保按钮文字清晰 */
.el-button {
  /* Element UI按钮文字颜色 - 使用深灰色 */
  color: var(--text-primary) !important;
  background-color: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
  /* 添加过渡效果 */
  transition: all 0.2s ease !important;
  box-shadow: var(--shadow-light);
}

/* 按钮悬停效果 */
.el-button:hover {
  background-color: var(--bg-secondary) !important;
  border-color: #adb5bd !important;
  box-shadow: var(--shadow-medium);
}

.el-button--primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #ffffff !important;
}

/* 主要按钮悬停效果 */
.el-button--primary:hover {
  background-color: #0056b3 !important;
  border-color: #0056b3 !important;
}

.el-button--success {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
  color: #ffffff !important;
}

.el-button--success:hover {
  background-color: #218838 !important;
  border-color: #1e7e34 !important;
}

.el-button--warning {
  background-color: var(--warning-color) !important;
  border-color: var(--warning-color) !important;
  color: #212529 !important;
}

.el-button--warning:hover {
  background-color: #e0a800 !important;
  border-color: #d39e00 !important;
}

.el-button--danger {
  background-color: var(--danger-color) !important;
  border-color: var(--danger-color) !important;
  color: #ffffff !important;
}

.el-button--danger:hover {
  background-color: #c82333 !important;
  border-color: #bd2130 !important;
}

/* 表单元素样式 - 优化亮色系设计 */
/* 基础输入元素 */
.el-input__inner,
.el-select__input,
.el-textarea__inner,
.el-checkbox__label,
.el-radio__label {
  /* 输入框背景颜色 - 使用白色 */
  background-color: var(--bg-primary);
  /* 输入框文字颜色 - 使用深灰色 */
  color: var(--text-primary) !important;
  /* 输入框边框颜色 - 使用浅灰色 */
  border-color: var(--border-color);
  /* 添加过渡效果 */
  transition: all 0.2s ease;
  border-radius: 4px;
}

/* 输入框悬停效果 */
.el-input__inner:hover,
.el-select__input:hover {
  border-color: #adb5bd;
}

/* 输入框聚焦效果 */
.el-input__inner:focus,
.el-select__input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
  outline: none;
}

/* 确保所有表单元素文字为深灰色 */
.el-form-item__label {
  color: var(--text-primary) !important;
  font-weight: 500;
}

/* 确保文本域内容为深灰色 */
.el-textarea textarea {
  color: var(--text-primary) !important;
}

/* 确保输入相关元素的placeholder文本也有足够对比度 */
.el-input__inner::placeholder,
.el-select__input::placeholder,
.el-textarea__inner::placeholder {
  color: var(--text-secondary);
  opacity: 1;
}

/* 补充其他输入相关组件样式 */
/* 密码输入框 */
.el-input--password .el-input__inner {
  color: var(--text-primary) !important;
}

/* 搜索输入框 */
.el-input--search .el-input__inner {
  color: var(--text-primary) !important;
}

/* 输入数字框 */
.el-input-number .el-input__inner {
  color: var(--text-primary) !important;
}

/* 范围选择器 */
.el-range-editor .el-input__inner {
  color: var(--text-primary) !important;
}

/* 确保编辑器内容为深灰色 */
.el-editor {
  color: var(--text-primary) !important;
}

/* 确保表单验证文字为红色 */
.el-form-item__error {
  color: var(--danger-color) !important;
}

/* 确保文件上传相关文本为深灰色 */
.el-upload__text,
.el-upload-dragger .el-upload__text {
  color: var(--text-primary) !important;
}

/* 确保级联选择器文字为深灰色 */
.el-cascader__input-internal {
  color: var(--text-primary) !important;
}

/* 确保颜色选择器文字为深灰色 */
.el-color-picker__trigger {
  color: var(--text-primary) !important;
}

/* 确保穿梭框文字为深灰色 */
.el-transfer-panel__list,
.el-transfer-panel__item,
.el-transfer-panel__header {
  color: var(--text-primary) !important;
}

/* 确保开关文字为深灰色 */
.el-switch__label {
  color: var(--text-primary) !important;
}

/* 通用输入元素选择器 - 确保没有遗漏任何输入组件 */
:is(
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  textarea,
  select
) {
  color: var(--text-primary) !important;
  background-color: var(--bg-primary) !important;
  border-color: var(--border-color);
}

/* 确保表单内所有元素文字默认为深灰色 */
.el-form {
  color: var(--text-primary) !important;
}

/* 重置过高优先级的通用规则，改为更合理的选择器 */
html body * {
  color: var(--text-primary);
}

/* 但保持链接颜色不变 */
a {
  color: var(--primary-color) !important;
}

.el-input__wrapper,
.el-select__wrapper {
  /* 输入框包装器背景颜色 - 保持与输入框一致 */
  background-color: var(--bg-primary) !important;
}

/* 确保下拉框选项清晰可见 */
.el-select-dropdown {
  /* 下拉框背景颜色 - 使用白色 */
  background-color: var(--bg-primary) !important;
  /* 下拉框边框颜色 - 使用浅灰色 */
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-medium);
}

.el-select-dropdown__item {
  /* 下拉框选项文字颜色 - 使用深灰色 */
  color: var(--text-primary) !important;
  transition: background-color 0.2s ease;
}

/* 下拉框选项悬停效果 */
.el-select-dropdown__item:hover {
  background-color: var(--bg-secondary) !important;
}

/* 日期选择器样式 */
.el-date-editor .el-input__inner {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.el-date-picker {
  background-color: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-medium);
}

.el-date-picker__header {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.el-date-picker__time-header {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.el-date-picker__cell {
  color: var(--text-primary) !important;
  transition: all 0.2s ease;
}

/* 日期选择器单元格悬停效果 */
.el-date-picker__cell:hover {
  background-color: var(--bg-secondary) !important;
}

.el-date-picker__cell--current:not(.el-date-picker__cell--disabled) {
  color: var(--primary-color) !important;
  font-weight: 600;
}

/* 卡片样式 */
.el-card {
  background-color: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
  box-shadow: var(--shadow-light);
  border-radius: 6px;
  transition: box-shadow 0.2s ease;
}

.el-card:hover {
  box-shadow: var(--shadow-medium);
}

.el-card__header {
  background-color: var(--bg-secondary) !important;
  border-bottom-color: var(--border-color) !important;
  color: var(--text-primary);
}

/* 对话框样式 */
.el-dialog {
  background-color: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-medium);
  border-radius: 8px;
}

.el-dialog__header {
  background-color: var(--bg-secondary) !important;
  border-bottom-color: var(--border-color) !important;
  color: var(--text-primary);
}

.el-dialog__title {
  color: var(--text-primary) !important;
  font-weight: 600;
}

/* 分页组件样式 */
.el-pagination {
  color: var(--text-primary);
}

.el-pagination button,
.el-pagination .el-pager li {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-color);
  transition: all 0.2s ease;
  border-radius: 4px;
}

/* 分页组件悬停效果 */
.el-pagination button:hover,
.el-pagination .el-pager li:hover {
  background-color: var(--bg-secondary);
  border-color: #adb5bd;
}

.el-pagination .el-pager li.is-active {
  background-color: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
}

/* 优化导航栏样式 */
.el-menu {
  background-color: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
}

.el-menu-item,
.el-submenu__title {
  color: var(--text-primary) !important;
  transition: all 0.2s ease;
}

.el-menu-item:hover,
.el-submenu__title:hover {
  background-color: var(--bg-secondary) !important;
  color: var(--primary-color) !important;
}

.el-menu-item.is-active {
  color: var(--primary-color) !important;
  background-color: var(--bg-secondary) !important;
}

/* 标签页样式优化 */
.el-tabs {
  color: var(--text-primary);
}

.el-tabs__header {
  border-bottom-color: var(--border-color);
}

.el-tabs__item {
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.el-tabs__item:hover {
  color: var(--primary-color);
}

.el-tabs__item.is-active {
  color: var(--primary-color);
  font-weight: 600;
}

/* 进度条样式 */
.el-progress-bar__outer {
  background-color: #e9ecef;
  border-radius: 6px;
}

/* 滑块样式 */
.el-slider__runway {
  background-color: #e9ecef;
}

/* 骨架屏样式 */
.el-skeleton__p,
.el-skeleton__h {
  background-color: #e9ecef;
}

/* 整体布局和间距优化 */
body {
  font-size: 16px;
}

/* 增强响应式设计 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}
